<!-- 当前模块：个人设置 -->
<template>
  <div class="page_personSetting">
    <navTitle />
    <div class="page_personSetting-container">
      <van-cell title="我的头像" @click="handleUpload">
        <div class="avatar">
          <img :src="headImgUrl" alt="" srcset="" />
        </div>
      </van-cell>
      <van-cell title="用户名" is-link :value="userInfo.appUserName" @click="handleRouter('/pages/person/pages/setUserName/main')"></van-cell>
      <van-cell title="密码" is-link @click="handleRouter('/pages/person/pages/setPassword/main')"></van-cell>
      <div class="bottom12"></div>
      <van-cell title="技术支持" is-link @click="handleRouter('/pages/person/pages/technicalSupport/main')"></van-cell>
      <van-cell title="版本号" value="v1.0.0"></van-cell>
    </div>
  </div>
</template>

<script>
import {api} from '@/utils/api'

export default {
  data () {
    return {
      headImgUrl: require('../../../../../static/images/index/person.png')
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || {}
    },
    communityId() {
      return this.$store.getters.communityId;
    }
  },
  onShow() {
    this.headImgUrl = this.userInfo.headImgUrl || require('../../../../../static/images/index/person.png')
  },
  methods: {
    handleUpload() {
      let _this = this;
      wx.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album','camera'], //从相册选择
        success: res => {
          const fs = wx.getFileSystemManager();
          wx.showLoading({ title: '加载中', mask: true });
          fs.readFile({
            filePath: res.tempFilePaths[0],
            encoding: 'base64',
            position: 0,
            success:(result) => {
              _this.handleUploadFn(result.data);
            },
            fail(res) {
              console.error(res);
              setTimeout(() => {
                wx.hideLoading();
              }, 500);
            }
          })
          
        }
      })
    },
    async handleUploadFn(base64) {
      const {memberId, appUserId} = this.userInfo;
      const data = {
        memberId: memberId,
        communityId: this.communityId,
        appUserId: appUserId,
        photo: base64
      }
      const res = await api.uploadOwnerPhoto(data);
      if(res.code == 0) {
        if(res.data) {
          this.headImgUrl = res.data.headImgUrl;
          const userInfo = this.userInfo;
          userInfo.headImgUrl = this.headImgUrl;
          this.$store.dispatch('setUserInfo', userInfo);
        }
      } else {
        wx.showToast({
          title: res.msg || "请求异常",
          icon: "error"
        })
      }
      setTimeout(() => { wx.hideLoading(); }, 500);
    },
    handleRouter(url) {
      wx.navigateTo({
        url: url
      })
    }
  },
  onPullDownRefresh() {
    wx.startPullDownRefresh({
      complete: () => {
        wx.stopPullDownRefresh();
      }
    })
  },
  onShareAppMessage() {
    return {
      title: '智慧养老',
      path: '/pages/auth/main',
      from: "menu" 
    }
  },
}
</script>

<style lang="scss">
.page_personSetting {
  height: 100vh;
  background: #f5f5f5;
  overflow: overlay;
  .page_personSetting-container {
    padding: 24rpx;
    .avatar {
      border-radius: 50%;
      height: 56rpx;
      width: 56rpx;
      float: right;
      border: 2rpx solid #ccc;
      border-radius: 50%;
      padding: 2rpx;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  
}
</style>
